@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
@import "app/styles/play/variables"

#level-dialogue-view
  +keyframes(speakingPulse)
    from
      filter: drop-shadow(0px 0px 8px #333)
      color: white
    50%
      filter: drop-shadow(0px 0px 35px skyblue)
      color: skyblue
    to
      filter: drop-shadow(0px 0px 8px #333)
      color: white

  width: 417px
  height: 296px
  background: transparent url(/images/level/code_palette_wood_background.png)
  background-size: 100% auto
  position: absolute
  bottom: -296px + 40px
  left: 300px
  left: calc(55% - 417px - #{$api-bar-width})
  // Bounce in
  @include transition(1s cubic-bezier(.17,.89,.42,1.36))
  z-index: 1

  &.active
    display: block
    bottom: -20px

  &.debrief
    bottom: -300px

  &.active.debrief
    bottom: -65px;

  &.speaking
    .dialogue-area
      .bubble
        @include animation(speakingPulse 1.5s infinite)

  .dialogue-area
    position: relative
    height: 100%
    width: 100%
    z-index: 1

    .bubble
      position: relative
      margin: 10px
      padding: 20px 20px 40px 20px
      color: white
      font-weight: bold
      background: transparent url(/images/level/dialogue_background.png)
      background-size: 100% 100%
      border: black solid 1px
      border-radius: 10px
      font-size: 18px
      line-height: 20px

      strong, a
        color: #FFCCAA

      a
        text-decoration: underline

      .hud-hint
        font-weight: normal
        color: #ddd
        font-size: 14px
        line-height: 16px
        vertical-align: middle

      .enter
        position: absolute
        right: 15px
        bottom: 20px
        div.dot
          background: #337
          width: 8px
          height: 8px
          position: absolute
          right: 8px
          top: 9px
          border-radius: 5px

      button, .alert
        padding: 2px 5px

      .enter button.with-dot
        padding-right: 20px

      h3
        margin: 0
        font-size: 16px
        line-height: 16px
        color: #338

      button
        margin-left: 10px
  
  &.debrief
    z-index: 11
    width: 100vw
    max-width: 1024px
    position: absolute
    left: 50vw
    transform: translateX(-50%)
    img:not(.embiggen)
      position: absolute
      width: 20%
      bottom: 25%
      filter: drop-shadow(8px 8px 8px black)
      left: 2.5%
    .embiggen
      position: absolute
      left: 0
      width: 25%
      bottom: 0
      filter: drop-shadow(8px 8px 8px black)
    .bubble
      border: initial
      width: 75%
      height: 66.66%
      right: 16px
      position: absolute
      top: 50%
      transform: translateY(-66.66%)
      padding: 64px !important
    @media (max-width: 800px)
      height: 50%
      .bubble > p
        margin-top: -32px

body.ipad #level-dialogue-view
  left: auto
  right: 0

  &.active
    bottom: -60px

  .hud-hint
    visibility: hidden
